<ng-container *ngIf="zone$ | async as zone">
    <div class="g-top-button-group _button-group">
        <!-- <button class="btn btn-outline-dark" (click)="addPersonnel()">添加人员</button> -->
        <button class="btn btn-outline-dark" (click)="addComputer()">添加终端</button>
        <button class="btn btn-outline-dark" (click)="addSoftware()">添加应用</button>
        <button class="btn btn-outline-info" [routerLink]="['../..', 'permission', zone.name]" queryParamsHandling="merge">
      制定权限
    </button>
        <button class="btn btn-outline-primary" (click)="exec()" appNoDblClick>执行权限</button>
        <!-- <button class="btn btn-outline-danger" (click)="deleteZone(zone)">删除区域</button> -->
    </div>

    <m-widget-group>
        <ng-template>
            <m-info-widget [zone]="zone" (changed)="reload()"></m-info-widget>
        </ng-template>
        <ng-template>
            <m-number-card name="人员数量" subtitle="该区域人员总数" footer="本月内新增人员数" [total]="zone.user_count" [value]="zone.new_user_count"></m-number-card>
        </ng-template>
        <ng-template>
            <m-number-card name="终端数量" subtitle="该区域终端总数" footer="本月内新增终端数" [total]="zone.pc_count" [value]="zone.new_pc_count"></m-number-card>
        </ng-template>
        <ng-template>
            <m-number-card name="软件数量" subtitle="该区域软件总数" footer="本月内新增软件数" [total]="zone.software_count" [value]="zone.new_software_count"></m-number-card>
        </ng-template>
    </m-widget-group>

    <div class="row">
        <div class="col-12">
            <m-resource-group></m-resource-group>
        </div>
        <div class="col-md-12 col-xl-9">
            <div class="permission-group">
                <m-permission-group></m-permission-group>
            </div>
            <m-default-permission></m-default-permission>
        </div>
        <div class="col-md-12 col-xl-3">
            <div class="row">
                <div class="col-md-4 col-xl-12">
                    <m-card [hideHead]="true">
                        <div class="auth-status">
                            <div class="g-card-title">权限状态</div>
                            <div>
                                <m-auth-status-text [status]="zone.auth_status"></m-auth-status-text>
                            </div>
                        </div>
                    </m-card>
                </div>
                <div class="col-md-4 col-xl-12">
                    <m-history [type]="'zone'"></m-history>
                </div>
                <div class="col-md-4 col-xl-12">
                    <div class="row">
                        <div class="col-xl-12">
                            <m-system-upgrade [zone]="zone">
                                <button class="btn btn-sm btn-secondary" (click)="upgrade()">升级系统</button>
                            </m-system-upgrade>
                        </div>
                        <div class="col-xl-12">
                            <m-software-usage [zone]="zone"></m-software-usage>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-container>